<template>
  <div>
    <div>
      学生状态：
      <a-select default-value="lucy" style="width: 120px" @change="handleChange">
        <a-select-option value="0">请选择</a-select-option>
        <a-select-option value="1">启用状态</a-select-option>
        <a-select-option value="2">禁用状态</a-select-option>
      </a-select>
      用户名：
      <a-input-search placeholder="input search text" style="width: 200px" v-model="value" />
      手机号：
      <a-input-search placeholder="input search text" style="width: 200px" v-model="tele" />
      <a-button type="primary" @click="onSearch">Primary</a-button>
      <a-button type="primary" @click="reSearch">重置</a-button>
    </div>

    <a-table :columns="columns" :data-source="users" :pagination="pagination" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      users: [],
      value: "",
      searchUser: [],
      tele:'',
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "roleName",
          dataIndex: "role_name",
          key: "role_name",
        },
        {
          title: "名字",
          dataIndex: "username",
          key: "username",
        },
        {
          title: "电话",
          dataIndex: "mobile",
          key: "mobile",
        },
        {
          title: "邮箱",
          dataIndex: "email",
          key: "email",
        },
        {
          title: "时间",
          dataIndex: "create_time",
          key: "create_time",
        },
        {
          title: "状态",
          dataIndex: "msg",
          key: "msg",
        },
      ],
      pagination: {
        pageSize: 5,
      },
    };
  },
  mounted() {
    axios.get("http://localhost:8080/userlist(1).json").then((res) => {
      // console.log(res.data.data.users)
      this.users = res.data.data.users;
      this.searchUser = [...this.users];
      this.users.forEach((el) => {
        var datas = new Date(el.create_time * 1000);
        var times = `
            ${datas.getFullYear()}-${datas.getMonth() + 1}-${datas.getDate()}
        `;
        // console.log(times);
        el.create_time = times;

        if (el.mg_state == true) {
          el.msg = "启用";
        } else {
          el.msg = "禁用";
        }
      });
    });
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onSearch() {
      if (this.value.length == "" && this.tele.length == '') {
        return;
      }
      this.users = [];
      this.searchUser.map((el) => {
        if (el.username == this.value || el.mobile == this.tele) {
          this.users.push(el);
        }
      });

    },
    reSearch() {
      this.users = this.searchUser;
    },
    handleChange(value) {
        this.users = []
      if (value == 0) {
        this.users = this.searchUser;
      } else if (value == 1) {
        this.searchUser.map((el) => {
          if (el.mg_state) {
            this.users.push(el);
          }
        });
      } else {
        this.searchUser.map((el) => {
          if (!el.mg_state) {
            this.users.push(el);
          }
        });
      }
    },
  },
};
</script>

<style>
</style>